@import '../../style/themes';
@import '../../style/mixins';

.x-card {
  @include reset-component();
  background: $card-bg;

  &-bordered {
    // border: 1px solid $card-border-color;
    outline: 1px solid $card-border-color;
    outline-offset: -1px;
  }
  &-hoverable {
    transition: all .3s;
    &:hover {
      box-shadow: $box-shadow-base;
    }
  }

  &_cover {
    overflow: hidden;
  }

  &_header {
    display: flex;
    align-items: center;
    padding: $padding-xs $padding-md;

    &_extra {
      display: flex;
      align-items: center;
    }
  }
  &_icon {
    margin-right: $margin-xs;
    font-size: 1.6em;
  }
  &_title {
    flex: 1;
    font-weight: 600;
    font-size: $heading-4-size - 2;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  &_close {
    padding: $padding-xss;
    font-size: 1.2em;
    opacity: .4;
    cursor: pointer;
    &:hover {
      opacity: 1;
      color: $white;
      background: $error-color;
    }
    &:active {
      opacity: .6;
    }
  }

  &_content {
    padding: $padding-xs $padding-md $padding-md;
  }

  &_footer {
    padding: $padding-xs $padding-md;
    border-top: 1px solid $border-color-split;
  }

}